<template>
  <div>
    <div class="divcss1">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="住院号">

          <el-input-number
            v-model="num"
            controls-position="right"
            :min="0"
            :max="10000"
          />

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

      </el-form>

    </div>

    <div class="divcss2">

      <el-form :inline="true" :model="biaodan" class="demo-form-inline">

        <el-form-item label="姓名">
          <el-input v-model="biaodan.name" />
        </el-form-item>

        <el-form-item label="科室">
          <el-input v-model="biaodan.ksName" />
        </el-form-item>

        <el-form-item label="金额">
          <el-input v-model="biaodan.advance" />
        </el-form-item>

        <el-form-item label="性别">
          <el-input v-model="biaodan.sex" />
        </el-form-item>

        <el-form-item label="医生">
          <el-input v-model="biaodan.doctorName" />
        </el-form-item>

        <el-form-item label="已用">
          <el-input v-model="biaodan.consume" />
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="biaodan.age" />
        </el-form-item>

        <el-form-item label="床位">
          <el-input v-model="biaodan.bed" />
        </el-form-item>

        <el-form-item label="余额">
          <el-input v-model="biaodan.surplus" />
        </el-form-item>

      </el-form>

    </div>

    <div>

      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="padding-left: 20px"
      >

        <el-form-item>
          <el-input v-model="input" placeholder="请输入预交金额" />

        </el-form-item>

        <el-form-item>

          <el-button
            type="primary"
            style="background-color: green"
            @click="onSubmit"
          >预交</el-button>

        </el-form-item>

      </el-form>

      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :header-cell-style="headClass"
        style="width: 98%; margin: auto"
      >
        <el-table-column prop="id" label="住院号" width="180" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="advance" label="预交金额" />
        <el-table-column prop="paymentDate" label="交款时间" />
        <el-table-column prop="amount3" label="操作">

          <template slot-scope="scope">

            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>

          </template>

        </el-table-column>

      </el-table>

    </div>

  </div>
</template>
<script>
import { allList } from '../../../api/Discharge'
export default {
  data() {
    return {
      AllList: [],
      num: '',
      biaodan: {
        name: '',
        ksName: '',
        advance: '',
        sex: '',
        doctorName: '',
        consume: '',
        age: '',
        bed: '',
        surplus: ''
      },
      tableData: []
    }
  },

  created() {
    this.allList()
  },

  methods: {
    onSubmit() {
      allList({
        id: this.num
      }).then((res) => {
        if (res.success) {
          this.biaodan = res.result[0]
          this.tableData = res.result
          console.log(this.biaodan)
        }
      })
    },
    headClass() {
      return 'text-align: center;background-color: gainsboro'
    }
  }
}
</script>
<style scoped>
.divcss1 {
  width: 35%;
  height: 200px;
  float: left;
  padding-top: 80px;
  padding-left: 50px;
}
.divcss2 {
  width: 65%;
  height: 200px;
  float: left;
  padding-top: 30px;
  padding-left: 50px;
}
</style>
